<template>
	<view class="content">
		<view class="bg-white top">
			<view class="list flexs1">
				<view class="list_left">姓名</view>
				<view class="list_right">
					<input placeholder="请输入您的姓名" />
				</view>
			</view>
			<view class="list flexs1">
				<view class="list_left"></view>
				<radio-group class="list_right radios text-left" @change="RadioChange">
					<radio class='orange' :class="radio=='A'?'checked':''" :checked="radio=='A'?true:false" value="A"></radio>
					<radio class='orange' :class="radio=='B'?'checked':''" :checked="radio=='B'?true:false" value="B"></radio>
				</radio-group>
			</view>
			<view class="list flexs1">
				<view class="list_left">手机号</view>
				<view class="list_right">
					<input placeholder="请输入您的手机号" />
				</view>
			</view>
			<view class="list list2 flexs1">
				<view class="list_left">地址</view>
				<view class="list_right">
					<textarea placeholder="请输入您的详细地址"></textarea>
				</view>
			</view>
			<view class="list list3 flexs1">
				<view class="">是否设为默认地址</view>
				<switch class='cyan' @change="SwitchA" :class="switchA?'checked':''" :checked="switchA?true:false"></switch>
			</view>
		</view>
		<view class="btns text-white text-bold text-center">保存</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				radio: 'A',
				switchA: false,
			}
		},
		methods: {
			RadioChange(e) {
				this.radio = e.detail.value
			},
			SwitchA(e) {
				this.switchA = e.detail.value
			},
		}
	}
</script>

<style>
	.content{
		background: #F9F9F9;
		width: 100vw;
		height: 100vh;
	}
	.top{
		padding: 0 30upx;
		border-top: 1px solid #E6E6E6;
		color: #333333;
	}
	.list{
		padding: 30upx 0;
		border-bottom: 1px solid #E6E6E6;
	}
	.list2{
		align-items: flex-start!important;
	}
	.list3{
		border-bottom: none;
	}
	.list_left{
		width: 25%;
	}
	.list_right{
		width: 75%;
	}
	.list_right input{
		width: 100%;
		padding-top: 6upx;
	}
	.list_right textarea{
		width: 100%;
		height: 100upx;
		padding-top: 50upx;
	}
	.orange{
		transform: scale(0.7);
		margin-right: 20upx;
	}
	.cyan{
		transform: scale(0.7);
	}
	uni-radio.checked .uni-radio-input{
		background: #F8774B!important;
	}
	.btns{
		width: 76%;
		padding: 25upx 0;
		background: #14C7CE;
		border-radius: 15upx;
		margin: 50upx 12%;
		font-size: 30upx;
	}
</style>
